<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>cjx-dialog</title>
    <meta name="generator" content="VuePress 1.9.7">
    
    <meta name="description" content="">
    
    <link rel="preload" href="/cccc/assets/css/0.styles.1a14e5ce.css" as="style"><link rel="preload" href="/cccc/assets/js/app.f157bd8f.js" as="script"><link rel="preload" href="/cccc/assets/js/2.65ca21bd.js" as="script"><link rel="preload" href="/cccc/assets/js/10.3ca84d19.js" as="script"><link rel="prefetch" href="/cccc/assets/js/11.ba40347f.js"><link rel="prefetch" href="/cccc/assets/js/12.f72e9887.js"><link rel="prefetch" href="/cccc/assets/js/3.3fbed017.js"><link rel="prefetch" href="/cccc/assets/js/4.bd722fb2.js"><link rel="prefetch" href="/cccc/assets/js/5.ce9f307f.js"><link rel="prefetch" href="/cccc/assets/js/6.f850e771.js"><link rel="prefetch" href="/cccc/assets/js/7.d6c9aa82.js"><link rel="prefetch" href="/cccc/assets/js/8.c0d98eb6.js"><link rel="prefetch" href="/cccc/assets/js/9.f6668a1d.js">
    <link rel="stylesheet" href="/cccc/assets/css/0.styles.1a14e5ce.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/cccc/" class="home-link router-link-active"></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/cccc/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/cjx-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/cccc/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/cjx-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/cccc/" aria-current="page" class="sidebar-link">快速开始</a></li><li><a href="/cccc/componentDocs/card.html" class="sidebar-link">Card</a></li><li><a href="/cccc/componentDocs/cswiper.html" class="sidebar-link">cSwiper</a></li><li><a href="/cccc/componentDocs/NbGantt.html" class="sidebar-link">NbGantt</a></li><li><a href="/cccc/componentDocs/dialog.html" aria-current="page" class="active sidebar-link">cjx-dialog</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/cccc/componentDocs/button.html" class="sidebar-link">Cbutton</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="cjx-dialog"><a href="#cjx-dialog" class="header-anchor">#</a> cjx-dialog</h1> <p>卡片组件</p> <h1 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h1> <p><img src="/cccc/assets/img/dialog.212bb416.png" alt="节点"></p> <h3 id="代码"><a href="#代码" class="header-anchor">#</a> 代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cxj-dialog</span> <span class="token attr-name">:visible.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mask</span> <span class="token attr-name">top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10vh<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">maskBg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rgba(0, 0, 0, 0.6)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      内容区域
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visible = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cxj-dialog</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>是否必要</th> <th>默认值</th></tr></thead> <tbody><tr><td>visible</td> <td>控制弹框显隐</td> <td>Boolean</td> <td>true</td> <td>-</td></tr> <tr><td>title</td> <td>弹框标题</td> <td>String</td> <td>false</td> <td></td></tr> <tr><td>width</td> <td>弹框宽度</td> <td>String</td> <td>false</td> <td>300px</td></tr> <tr><td>top</td> <td>弹框与浏览器顶部距离</td> <td>String</td> <td>false</td> <td>15vh</td></tr> <tr><td>mask</td> <td>遮罩层的显隐</td> <td>Boolean</td> <td>false</td> <td>false</td></tr> <tr><td>maskBg</td> <td>遮罩层的颜色</td> <td>String</td> <td>false</td> <td>rgba(0, 0, 0, 0.6)</td></tr> <tr><td>footer</td> <td>弹框底部按钮</td> <td>Slot</td> <td>false</td> <td>-</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/cccc/componentDocs/NbGantt.html" class="prev">
        NbGantt
      </a></span> <span class="next"><a href="/cccc/componentDocs/button.html">
        Cbutton
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/cccc/assets/js/app.f157bd8f.js" defer></script><script src="/cccc/assets/js/2.65ca21bd.js" defer></script><script src="/cccc/assets/js/10.3ca84d19.js" defer></script>
  </body>
</html>
